<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        display: flex;
        /*
          弹性盒子分为：主轴 和 次轴
                1. 主轴：开发时描述的排序方向为主轴
                2. 次轴：垂直于主轴的方向
                        # 默认填充满次轴大小
        */
        flex-flow: row;
        width: 500px;
        height: 300px;
        border: 1px solid black;
      }
      /* 
        特殊场景：元素希望能够平局分配主轴的空间
            通过弹性盒子的子元素 定义 flex-grow 描述分组规则，由浏览器自行完成计算
            => flex-grow 表示将子元素设置为分组大小 1，基于总数进行分组计算
            => flex-grow 使用时，如果存在元素没有定义，或者设置了固定宽度，此时剩余的元素才会分组
      */
      .item1 {
        background-color: brown;
        width: 50px;
      }
      .item {
        /* flex-grow: 10; */
      }
      .item:nth-child(odd) {
        flex-grow: 1;
        background-color: #efefef;
      }
      .item:nth-child(even) {
        flex-grow: 2;
        background-color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item1">独立元素</div>
      <div class="item">元素1</div>
      <div class="item">元素2</div>
      <div class="item">元素3</div>
      <div class="item">元素4</div>
    </div>
  </body>
</html>
